<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar fixed>
      <template #left>
        <span style="color:#fff">天天头条</span>
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" color="#fff" @click="moveSearchPageFn"/>
      </template>
    </van-nav-bar>

    <!-- 滑动tab标签页 -->
    <div class="main">
      <van-tabs v-model="active" animated sticky offset-top="1.226667rem" @change="channelChangeFn">
        <van-tab :title="item.name" v-for="(item) in userChannels" :key="item.id">
          <ArticleList :channel_id='userChannels[active].id'></ArticleList>
        </van-tab>
      </van-tabs>
      <!-- 编辑频道图标 -->
      <van-icon name="plus" @click="showPopup" size="0.37333334rem" class="moreChannels" />
    </div>
    <!-- 弹出层内容 -->
    <van-popup v-model="show" class="channel_popup" get-container="body">
      <ChannelEdit :userChannels='userChannels' :unCheckChannels='unCheckChannels'
        @addUserChannelsEv='addUserChannelsFn' @removeChannel='removeChannelFn' @closeEv ='closeFn'
        @changeChannel='changeChannelFn'>
        </ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import ChannelEdit from '@/views/Home/ChannelEdit.vue'
import ArticleList from '@/views/Home/components/ArticleList'
import { getUserChannelsAPI, getAllChannelsAPI, updateChannelsAPI } from '@/api'
export default {
  name: 'Home',
  data () {
    return {
      active: 0, // tab导航-激活索引
      userChannels: [], // 用户选择频道数据
      allChannels: [], // 所有频道数据
      show: false, // 弹出层是否显示
      channelScrollTObj: {} // 每个频道的滚动位置
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  async created () {
    // 获取用户选择频道数据
    const result = await getUserChannelsAPI()
    this.userChannels = result.data.data.channels
    // 获取所有频道数据
    const result2 = await getAllChannelsAPI()
    this.allChannels = result2.data.data.channels
  },
  computed: {
    // 所有的频道减去用户选择的频道
    unCheckChannels () {
      const newArr = this.allChannels.filter(bigObj => {
        const index = this.userChannels.findIndex(smallObj => {
          return bigObj.id === smallObj.id
        })
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
      return newArr
    }
  },

  methods: {
    // 展示弹出层
    showPopup () {
      this.show = true
    },
    // 子组件添加到用户自选频道的属性
    async addUserChannelsFn (item) {
      this.userChannels.push(item)
      // 把最新的数组发送给后台
      await updateChannelsAPI(this.userChannels)
    },
    // 删除某一个频道数据
    async removeChannelFn (item) {
      const index = this.userChannels.findIndex(obj => {
        return obj.id === item.id
      })
      // 删除
      this.userChannels.splice(index, 1)
      // 再次发送请求
      await updateChannelsAPI(this.userChannels)
    },
    // 关闭弹出层
    closeFn () {
      this.show = false
    },
    // 点击标签跳转到对应的栏目
    changeChannelFn (item) {
      this.active = this.userChannels.findIndex((obj) => {
        return obj.id === item.id
      })
    },
    // 搜索图标跳转路由
    moveSearchPageFn () {
      this.$router.push('/search')
    },
    // tab切换的回调
    channelChangeFn () {
      // console.log(this.channelScrollTObj[this.userChannels[this.active].id])
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollTObj[this.userChannels[this.active].id]
        document.body.scrollTop = this.channelScrollTObj[this.userChannels[this.active].id]
      })
    },
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop || document.body.scrollTop
      // 同事保存当前频道的滚动距离
      this.channelScrollTObj[this.userChannels[this.active].id] = document.documentElement.scrollTop ||
      document.body.scrollTop
      // console.log(this.userChannels[this.active].id)
    }

  },
  // 监听网页滚动  保存滚动的位置
  activated () {
    window.addEventListener('scroll', this.scrollFn)
    document.documentElement.scrollTop = this.$route.meta.scrollT
    document.body.scrollTop = this.$route.meta.scrollT
  },
  deactivated () {
    window.removeEventListener('scroll', this.scrollFn)
  }
}
</script>

<style scoped lang='less'>
  .main{
    padding-top:44px;
  }

  /deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
  }

  /* // 设置小图标的样式 */
  .moreChannels {
  position: fixed;
  top: 60px;
  right: 8px;
  z-index: 999;
  }
  .channel_popup{
    width: 100vw;
    height: 100vh;
  }
</style>
